<template>
  <div class="app-container minvh70 theme-dark">
    <div class="baselight flex1 bgpart ml10" v-if="type === 1">
      <div class="flex between baselight2 ptb20 plr20 ft16 bgheader">
        <span>{{ $t('Total Assets') }}: ${{data.balance}}</span>
        <a href="javascript:" class="blue" @click="showFinancialTables">
          {{$t('Financial records')}}
        </a>
      </div>
    </div>
    <div class="between baselight2 ptb20 plr20 ft16 bgheader flex alcenter" v-else>
      <div>
        <span class="pointer" @click="showFinancialTables(1)">{{$t('Account')}}</span> / <span class="blue">{{$t('Financial records')}}</span>
      </div>
    </div>
    <a-table v-if="type===1" :columns="columns" :data-source="data.list" :pagination="false" class="ptb10">
      <span v-if="['USDT','ETH','BTC'].indexOf(record.name) != -1" slot="action" slot-scope="text, record">
        <a-button type="link">{{$t('Withdraw')}}</a-button>
        <a-divider type="vertical"/>
        <a-button type="link" @click="rechargeHandler(record)">{{$t('Recharge')}}</a-button>
      </span>
    </a-table>
    
    <div v-else class="ptb10">
      <div class="flex alcenter baselight mb10 plr20">
        <span class="flex1">{{ $t('Currency') }}</span>
        <span class="flex1 tc">{{ $t('type') }}</span>
        <span class="flex1 tc">{{ $t('Record') }}</span>
        <span class="flex1 tc">{{ $t('Time') }}</span>
      </div>
      <div v-if="records.length <= 0">
        <div class="tc ptb40">
          <img
              src=""
              alt=""
              class="wt70"
          />
          <p>{{ $t('No record yet') }}</p>
        </div>
      </div>
      <div v-else class="flex alcenter ptb10 bdbheader plr20" v-for="(item) in records" :key="item.id">
        <span class="flex1">{{item.name}}</span>
        <span class="flex1 tc">{{item.type}}</span>
        <span class="flex1 tc">{{item.transResult}}</span>
        <span class="flex1 tc">{{item.createTime}}</span>
      </div>
    </div>
  </div>
</template>

<script>
import {getAssetsCloudInfo, getAssetsLog} from "@/api/asset";

export default {
  data() {
    return {
      type: 1,
      data: {
        balance: 0,
        list: []
      },
      records: [],
      name:'USDT',
      columns: [
        {title: this.$t('Currency'), key: 'name', dataIndex: 'name'},
        {title: this.$t('Available'), key: 'useAmount', dataIndex: 'useAmount'},
        {title: this.$t('under review'), key: 'amount', dataIndex: 'amount'},
        {title: this.$t('folded')+'($)', key: 'allAmount', dataIndex: 'allAmount'}
      ]
    };
  },
  methods: {
    refresh(){
      this.loadLegalData()
      // this.loadAssetsLog()
    },
    showFinancialTables(i) {
      this.type = i
      if (i === 1) {
        this.loadLegalData()
      }else {
        this.loadAssetsLog()
      }
    },
    loadLegalData() {
      getAssetsCloudInfo().then((res) => {
        this.data = res.data
      })
    },
    loadAssetsLog() {
      getAssetsLog({type: 'cloud'}).then(res => {
        this.records = res.data
      })
    }
  },
  mounted() {
    this.loadLegalData()
    // this.loadCoinList()
  },
};
</script>

<style lang="scss" scoped>
:deep.ant-select-arrow{
  color: white;
}

</style>
